<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="layout :: htmlhead" th:with="title='favorites'"></head>
<body>

<!-- Theme CSS -->
<link rel="stylesheet" th:href="@{/index/css/freelancer.min.css}" />
<div th:replace="fragments/alert :: alert">alert</div>
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top navbar-custom">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
            </button>
            <a class="navbar-brand" href="/index">云收藏</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li class="hidden">
                    <a href="#page-top"></a>
                </li>
                <!--<li>
                    <a href="/lookAround/standard/ALL">随便看看</a>
                </li>-->
                <li>
                    <a href="/login" th:unless="${loginUserInfo != null}">登录</a>
                    <a href="/" th:if="${loginUserInfo != null}" th:text="${loginUserInfo.userName}" class="userName"></a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <script>
        (function($) {
            $('body').scrollspy({
                target: '.navbar-fixed-top',
                offset: 51
            });
            $('#mainNav').affix({
                offset: {
                    top: 100
                }
            })
        })(jQuery);
    </script>
    <!-- /.container-fluid -->
</nav>
<div class="wrapper">
    <section style="margin-left:0;">
        <div class="content-wrapper">
            <div class="unwrap">
                <div class="mast">
                    <div class="bg-cover" th:style="'background-image:url('+ @{(${user.backgroundPicture} == null ? @{/img/profile-bg.jpg}: '/'+${user.backgroundPicture})} +')'">
                        <div class="p-xl text-center text-white">
                            <a href="javascript:void(0);">
                                <img th:src="@{(${user.profilePicture} == null ? @{/img/favicon.png}:'/'+${user.profilePicture})}" alt="" class="img-thumbnail img-circle thumb128"/></a>
                            <h3 class="m0 mt" th:text="${user.userName}" id="userUserName">用户昵称</h3>
                            <p th:if="${myself == 'YES'}" th:text="${user.email}">123456789@qq.com</p>
                            <p th:text="${user.introduction== null ? '暂无简介': user.introduction}" id="userIntroduction">暂无简介</p>
                            <a href="javascript:void(0);" th:if="${loginUserInfo!=null and myself == 'NO'}" id="follow"></a>
                        </div>
                    </div>
                    <div class="text-center bg-gray-dark p-lg mb">
                        <div class="row row-table">
                            <div class="col-xs-4 br">
                                <h3 class="m0" th:text="${collectCount}" id="totalCount">4</h3>
                                <p class="m0">
                                    <span th:if="${myself == 'YES'}">收藏</span>
                                    <span th:if="${myself == 'NO'}">公开收藏</span>
                                </p>
                            </div>
                            <div class="col-xs-4 br">
                                <h3 class="m0" th:text="${follow}">0</h3>
                                <p class="m0">
                                    <span>关注</span>
                                </p>
                            </div>
                            <div class="col-xs-4">
                                <h3 class="m0" th:text="${followed}" id="followed">0</h3>
                                <p class="m0">
                                    <span>粉丝</span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="p-lg">
                        <div class="row" >
                            <div layout:fragment="usercontent" id="usercontent" ></div>
                            <div class="col-lg-3 col-md-3">
                                <div class="panel panel-default">
                                    <div class="panel-heading text-center">TA的收藏夹</div>
                                    <div class="list-group" id="userFavorites">
                                        <a id="userAll" href="javascript:void(0);" class="media p mt0 list-group-item active" th:onclick="'userLocationUrl(\'/usercontent/'+${user.id}+'/0\',\'userAll\');'">
                                 <span class="media-body">
                                    <span class="media-heading" id="allFavorites">
                                    </span>
                                 </span>
                                        </a>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading text-center">关注</div>
                                    <div class="list-group ng-scope" th:each=" follow : ${followUser}">
                                        <a class="media p mt0 list-group-item">
				                  <span class="pull-left">
				                     <img  alt="Image" class="media-object img-circle thumb32" src="img/dummy.png" th:src="${follow[2] !=null? '/'+follow[2]:'img/dummy.png'}" />
				                  </span>
                                            <span class="media-body">
				                     <span class="media-heading">
				                        <strong class="ng-binding" th:text="${follow[0]}">粉丝1</strong>
				                        <small class="text-muted ng-binding" th:text="${follow[1] == null ? '暂无简介' : follow[1].length() gt 10 ? follow[1].substring(0,10)+'...' : follow[1]}">暂无简介</small>
				                     </span>
				                  </span>
                                        </a>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading text-center">粉丝</div>
                                    <div class="list-group ng-scope" th:each=" followed : ${followedUser}">
                                        <a class="media p mt0 list-group-item">
				                  <span class="pull-left">
				                     <img  alt="Image" class="media-object img-circle thumb32" src="img/dummy.png" th:src="${followed[2] !=null? '/'+followed[2]:'img/dummy.png'}" />
				                  </span>
                                            <span class="media-body">
				                     <span class="media-heading">
				                        <strong class="ng-binding" th:text="${followed[0]}">粉丝1</strong>
				                        <small class="text-muted ng-binding" th:text="${followed[1] == null ? '暂无简介' : followed[1].length() gt 10 ? followed[1].substring(0,10)+'...' : followed[1]}">暂无简介</small>
				                     </span>
				                  </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <input type="hidden" name="collectId" id="collectId" />
            <input type="hidden"  id="userId" th:value="${user.id}" />
            <input type="hidden" id="myself" th:value="${myself}"/>
            <input type="hidden" id="loginUserInfo" th:value="${loginUserInfo!=null}? ${loginUserInfo.id}"/>
            <input type="hidden" id="collector" value="collector"/>
        </div>
    </section>
</div>

<script type="text/javascript" src="/webjarslocator/jquery/jquery.min.js"></script>
<script th:src="@{/vendor/jquery.form/jquery.form.min.js}"></script>
<script th:src="@{/webjars/bootstrap/3.3.6/dist/js/bootstrap.min.js}"></script>
<script th:src="@{/vendor/modernizr/modernizr.custom.js}" ></script>
<script th:src="@{/vendor/jQuery-Storage-API/jquery.storageapi.js}" ></script>
<script th:src="@{/vendor/jquery.flexslider/jquery.flexslider.min.js}"></script>
<script th:src="@{/media/js/app.js}" ></script>
<script th:src="@{/js/comm.js}" ></script>
<script th:src="@{/js/layout.js}" ></script>
<script th:src="@{/js/collect.js}" ></script>
<script th:src="@{/vendor/parsleyjs/dist/parsley.min.js}"></script>
<script th:src="@{/vendor/toastr/toastr.min.js}"></script>
<script th:src="@{/index/js/freelancer.min.js}"></script>
<script type='text/javascript' th:inline="javascript">
    $(function(){
        var isFollow = /*[[${isFollow}]]*/;
        var user = /*[[${user}]]*/;
        var loginUser = /*[[${loginUser}]]*/;
        if(isFollow > 0){
            $("#follow").attr("class","btn btn-default");
            $("#follow").attr("onclick","changeFollow('unfollow','"+user.id+"')");
            $("#follow").text("取消关注");
        }else{
            $("#follow").attr("class","btn btn-success");
            $("#follow").attr("onclick","changeFollow('follow','"+user.id+"')");
            $("#follow").text("关注");
        }
        $("#standardBtn").click(function(){
            $("#standard").hide();
            $("#simple").show();
            $("#showModel").val("simple");
        });
        $("#simpleBtn").click(function(){
            $("#standard").show();
            $("#simple").hide();
            $("#showModel").val("standard");
        });
        userLocationUrl("/usercontent/"+user.id+"/0","userAll");
        loadUserFavorites();
        standardStr = "standard";

        document.onkeydown = function(e){
            if(!e) e = window.event;//火狐中是 window.event
            if((e.keyCode || e.which) == 13){
                window.event ? window.event.returnValue = false : e.preventDefault();
                var key=document.getElementById("searchKey").value;
                if(key!=''){
                    locationUrl('/search/'+key,"");
                }
            }
        }
    });
    function changeFollow(status,userId){
        $.ajax({
            async: false,
            type: 'POST',
            dataType: 'json',
            data:{'status':status,'userId':userId},
            url: '/follow/changeFollowStatus',
            error : function(XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest);
                console.log(textStatus);
                console.log(errorThrown);
            },
            success: function(response){
                if(response.rspCode == '000000'){
                    $("#follow").removeAttr("class");
                    $("#follow").removeAttr("onclick");
                    $("#follow").text("");
                    if(status == "follow"){
                        $("#follow").attr("class","btn btn-default");
                        $("#follow").attr("onclick","changeFollow('unfollow','"+userId+"')");
                        $("#follow").text("取消关注");
                        $("#followed").text(Number($("#followed").text())+1);
                    }else{
                        $("#follow").attr("class","btn btn-success");
                        $("#follow").attr("onclick","changeFollow('follow','"+userId+"')");
                        $("#follow").text("关注");
                        $("#followed").text(Number($("#followed").text())-1);
                    }
                }
            }
        });
    }
    function loadUserFavorites(){
        $.ajax({
            async: false,
            type: 'POST',
            dataType: 'json',
            url: '/favorites/getFavorites/'+$("#userId").val(),
            error : function(XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest);
                console.log(textStatus);
                console.log(errorThrown);
            },
            success: function(favorites){
                initUserFavorites(favorites);
            }
        });
    }
</script>
</body>
</html>